<template>
  <view class="container">
    <view class="button-container">
      <button class="device-button" @click="goToDeviceManagement">设备管理</button>
      <button class="instruction-button" @click="goToInstructionManagement">指令管理</button>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goToDeviceManagement() {
      // 在这里跳转到设备管理页面
      uni.navigateTo({
        url: '/pages/management/DeviceManagement'
      });
    },
    goToInstructionManagement() {
      // 在这里跳转到指令管理页面
      uni.navigateTo({
        url: '/pages/management/InstructionManagement'
      });
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

button {
  width: 300px;
  height: 100px;
  margin-bottom: 20px;
  font-family: '微软雅黑', sans-serif; /* 使用微软雅黑字体 */
  font-size: 28px; /* 放大字体大小 */
  border: none;
  border-radius: 10px;
  color: #fff; /* 字体颜色为白色 */
  cursor: pointer;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); /* 按钮阴影效果 */
  background-color: rgba(0, 0, 0, 0.3); /* 按钮背景色（磨砂玻璃透明效果） */
  display: flex;
  justify-content: center;
  align-items: center;
}

.device-button {
  background-color: #4CAF50; /* 设备管理按钮颜色 */
}

.instruction-button {
  background-color: #2196F3; /* 指令管理按钮颜色 */
}
</style>
